<template>
    <div>
        <el-input prefix-icon="el-icon-search" style="padding:5px;width: 98%;height:40px;background-color: gray;position: fixed;top: 41px;z-index: 999" v-model="content">
            <el-button slot="append" @click="initData">搜索</el-button>
        </el-input>
        <div style="margin-top: 54px">
            <mt-cell-swipe
                    v-for="item in list"
                    :title="item.title+'----'+item.content.substring(0,10)+'...'"
                    :key="item.id"
                    :right="[
                {
                  content: '删除',
                  style: { background: 'red', color: '#fff'},
                  handler: () => deleteInfo(item.id)
                }
                ]">
                <img v-if="item.status === 0" slot="icon" src="../../assets/app/bell.png" width="24" height="24">
                <img v-else slot="icon" src="../../assets/app/info-no.png" width="24" height="24">
                <el-button @click="showInfo(item.id)" type="text" icon="el-icon-search">查看</el-button>
            </mt-cell-swipe>
        </div>

        <el-dialog  :title="infoDetail.title"
                    :visible.sync="popupVisible"
                    width="80%"
                    :before-close="handleClose">
            <div style="display: flex;flex-direction: column;align-items: center">
                <el-row style="width: 100%">
                    <el-col :span="8" style="font-weight: 600">消息标题:</el-col>
                    <el-col :span="16">{{infoDetail.title}}</el-col>
                </el-row>
                <h2>-------------------------------------</h2>
                <el-row style="width: 100%">
                    <el-col :span="8" style="font-weight: 600">发送人:</el-col>
                    <el-col :span="16">{{infoDetail.sendUserId | UserFilter}}</el-col>
                </el-row>
                <h2>-------------------------------------</h2>
                <el-row style="width: 100%">
                    <el-col :span="8" style="font-weight: 600">创建时间:</el-col>
                    <el-col :span="16">{{infoDetail.createDatetime}}</el-col>
                </el-row>
                <h2>-------------------------------------</h2>
                <el-row style="width: 100%">
                    <el-col :span="8" style="font-weight: 600">消息内容:</el-col>
                    <el-col :span="16" style="color: cornflowerblue">{{infoDetail.content}}</el-col>
                </el-row>
                <h2>-------------------------------------</h2>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import Filter from '../../utils/filter.js'
    import { MessageBox,Toast } from 'mint-ui';
    export default {
        name: "info",
        data(){
            return{
                content:"",
                popupVisible:false,
                list:[],
                infoDetail:{}
            }
        },
        methods:{
            showInfo(data){
                console.log("show"+data);
                this.popupVisible = true;
                this.$http.get("/information/get/"+data).then(res=>{
                    if (res.status===200){
                        this.infoDetail = res.data;
                    }
                })
            },
            deleteInfo(data){
                MessageBox.confirm('确定删除此通知?').then(() => {
                    this.$http.get("/information/delete/"+data).then(res=>{
                        if (res.status===200){
                            Toast({
                                message: '删除成功',
                                iconClass: 'el-icon-success'
                            });
                            this.initData();
                        }
                    })
                });
                console.log("delete"+data)
            },
            initData(){
                let self = this;
                self.$http.get("/information/getAllInfoById?content="+self.content).then(res=>{
                    if (res.status === 200){
                        self.list = res.data;
                        console.log(res.data)
                    }
                })
            },
            handleClose(){
                this.popupVisible = false;
                this.initData();
            }
        },
        mounted(){
            this.initData()
        },
        filters:{
            UserFilter:function (data) {
                return Filter.UserNameFilter(data)
            }
        }
    }
</script>

<style lang="less">
    .el-dialog__header{
        background-color: #26a2ff !important;
        padding: 6px 10px 2px!important;
        text-align: center;
        .el-dialog__title {
            font-size: 20px;
            color: white;
            letter-spacing: 1px;
            font-weight: 600;
        }
        .el-dialog__headerbtn .el-dialog__close{
            color: white;
        }
    }
    .el-dialog__headerbtn{
        top: 10px;
    }
</style>